<template>
  <div class="fire-warning-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h2 class="page-title">防火预警</h2>
      </div>
      <div class="header-right">
        <el-button icon="el-icon-refresh" @click="refreshData" circle></el-button>
        <el-button icon="el-icon-setting" @click="settingsVisible = true" circle></el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧栏 -->
      <div class="left-panel">
        <!-- 雷达图区域 -->
        <div class="radar-section">
          <!-- 雷达图 -->
        <div class="radar-container">
          <svg class="radar-chart" viewBox="0 0 300 300">
            <!-- 黑色背景 -->
            <rect width="300" height="300" fill="#000000" rx="150"/>
            
            <!-- 同心圆 -->
            <circle cx="150" cy="150" r="120" fill="none" stroke="#0099ff" stroke-width="1" opacity="0.6"/>
            <circle cx="150" cy="150" r="90" fill="none" stroke="#0099ff" stroke-width="1" opacity="0.6"/>
            <circle cx="150" cy="150" r="60" fill="none" stroke="#0099ff" stroke-width="1" opacity="0.6"/>
            <circle cx="150" cy="150" r="30" fill="none" stroke="#0099ff" stroke-width="1" opacity="0.6"/>
            
            <!-- 蓝色十字标线 -->
            <line x1="30" y1="150" x2="270" y2="150" stroke="#0099ff" stroke-width="1"/>
            <line x1="150" y1="30" x2="150" y2="270" stroke="#0099ff" stroke-width="1"/>
            
            <!-- 蓝色扇形扫描效果 -->
            <defs>
              <linearGradient id="scanGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#0099ff;stop-opacity:0"/>
                <stop offset="100%" style="stop-color:#0099ff;stop-opacity:0.6"/>
              </linearGradient>
            </defs>
            <path class="scan-line" d="M 150 150 L 150 30 A 120 120 0 0 1 210 90 Z" fill="url(#scanGradient)"/>
            
            <!-- 红色报警点 -->
            <circle cx="200" cy="100" r="4" fill="#ff4444">
              <animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite"/>
            </circle>
            <circle cx="120" cy="200" r="4" fill="#ff4444">
              <animate attributeName="opacity" values="1;0.3;1" dur="1.5s" repeatCount="indefinite"/>
            </circle>
          </svg>
        </div>
        </div>

        <!-- 报警日志区域 -->
        <div class="alarm-log-section">
          <div class="section-header">
            <div class="blue-line"></div>
            <i class="el-icon-document alarm-icon"></i>
            <span class="section-title">报警日志</span>
          </div>
          <div class="log-content" v-loading="loading">
            <div v-if="alarmLogs.length === 0 && !loading" class="no-data">
              <i class="el-icon-document"></i>
              <span>暂无报警日志</span>
            </div>
            <div v-else class="log-list">
              <div v-for="log in alarmLogs" :key="log.id" class="log-item">
                <div class="log-time">{{ formatTime(log.createTime) }}</div>
                <div class="log-device">{{ log.deviceName }}</div>
                <div class="log-content-text">{{ log.deviceOpLog }}</div>
                <span class="log-type" :class="getLogTypeClass(log.logType)">
                  {{ getLogTypeText(log.logType) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧栏 -->
      <div class="right-panel">
        <!-- 设备信息卡片 -->
        <div class="device-card" v-if="deviceInfo">
          <div class="card-header">
            <i class="device-icon el-icon-fire"></i>
            <span class="device-name">{{ deviceInfo.deviceName || '防火监控设备' }}</span>
          </div>
          <div class="card-content">
            <div class="status-row">
              <span class="status-label">设备状态：</span>
              <span class="status-value" :class="getStatusClass(deviceInfo.opStatus)">
                {{ getStatusText(deviceInfo.opStatus) }}
              </span>
            </div>
            <div class="device-info-row">
              <span class="info-label">设备别名：</span>
              <span class="info-value">{{ deviceInfo.alias || '-' }}</span>
            </div>
            <div class="device-info-row">
              <span class="info-label">设备标识：</span>
              <span class="info-value">{{ deviceInfo.ident || '-' }}</span>
            </div>
            <div class="device-info-row">
              <span class="info-label">所属库房：</span>
              <span class="info-value">{{ deviceInfo.storeName || '-' }}</span>
            </div>
            <div class="device-info-row">
              <span class="info-label">设备类型：</span>
              <span class="info-value">{{ deviceInfo.deviceType || '-' }}</span>
            </div>
          </div>
          <div class="card-actions">
            <el-button 
              type="primary" 
              size="small" 
              class="cancel-alarm-btn"
              :disabled="deviceInfo.opStatus === '0'"
              @click="handleCancelAlarm"
            >
              {{ deviceInfo.opStatus === '1' ? '取消报警' : '设备正常' }}
            </el-button>
          </div>
        </div>
        
        <!-- 设备信息加载状态 -->
        <div class="device-card" v-else>
          <div class="loading-content">
            <i class="el-icon-loading"></i>
            <span>加载设备信息中...</span>
          </div>
        </div>
        
        <!-- 空白区域 -->
        <div class="blank-area"></div>
      </div>
    </div>

    <!-- 设置对话框 -->
    <el-dialog title="设置" :visible.sync="settingsVisible" width="400px">
      <p>这里可以添加设置选项</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="settingsVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listAlarmLogs, listDevices } from '@/api/archives/firewarning'

export default {
  name: 'FireWarningMonitor',
  data() {
    return {
      loading: false,
      alarmLogs: [],
      deviceInfo: null,
      settingsVisible: false
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    // 加载数据
    async loadData() {
      this.loading = true
      try {
        await Promise.all([
          this.loadAlarmLogs(),
          this.loadDeviceInfo()
        ])
      } catch (error) {
        console.error('加载数据失败:', error)
        this.$message.error('加载数据失败')
      } finally {
        this.loading = false
      }
    },
    
    // 加载报警日志
    async loadAlarmLogs() {
      try {
        this.loading = true;
        const response = await listAlarmLogs();
        if (response.code === 200 && response.data) {
          this.alarmLogs = response.data;
        } else {
          this.alarmLogs = [];
          this.$message.warning(response.msg || '获取报警日志失败');
        }
      } catch (error) {
        console.error('加载报警日志失败:', error);
        this.alarmLogs = [];
        this.$message.error('网络错误，无法获取报警日志');
      } finally {
        this.loading = false;
      }
    },

    // 加载设备信息
    async loadDeviceInfo() {
      try {
        const response = await listDevices();
        console.log('设备信息响应:', response); // 添加调试日志
        if (response.code === 200 && response.data && response.data.length > 0) {
          // 取第一个设备作为当前监控设备
          this.deviceInfo = response.data[0];
          console.log('设备信息已加载:', this.deviceInfo); // 添加调试日志
        } else {
          this.deviceInfo = null;
          this.$message.warning(response.msg || '获取设备信息失败');
        }
      } catch (error) {
        console.error('加载设备信息失败:', error);
        this.deviceInfo = null;
        this.$message.error('网络错误，无法获取设备信息');
      }
    },
    
    // 刷新数据
    refreshData() {
      this.loadData()
      this.$message.success('数据已刷新')
    },
    
    // 取消报警
    handleCancelAlarm() {
      if (this.deviceInfo && this.deviceInfo.opStatus === '1') {
        this.$confirm('确认取消该设备的报警状态吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 这里可以调用取消报警的API
          this.$message({
            type: 'success',
            message: '报警已取消'
          });
          // 重新加载设备信息
          this.loadDeviceInfo();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    
    // 获取日志类型文本
    getLogTypeText(logType) {
      const typeMap = {
        '1': '报警',
        '2': '操作',
        '3': '故障'
      }
      return typeMap[logType] || '未知'
    },
    
    // 获取日志类型样式
    getLogTypeClass(logType) {
      const classMap = {
        '1': 'log-type-alarm',
        '2': 'log-type-operation',
        '3': 'log-type-fault'
      }
      return classMap[logType] || ''
    },
    
    // 获取设备状态文本
    getStatusText(opStatus) {
      const statusMap = {
        '0': '正常',
        '1': '报警',
        '2': '故障',
        '3': '离线'
      }
      return statusMap[opStatus] || '未知'
    },
    
    // 获取设备状态样式
    getStatusClass(opStatus) {
      const classMap = {
        '0': 'status-normal',
        '1': 'status-alarm',
        '2': 'status-fault',
        '3': 'status-offline'
      }
      return classMap[opStatus] || ''
    }
  }
}
</script>

<style scoped>
.fire-warning-container {
  padding: 20px;
  background-color: #fafafa;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

.page-title {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

.header-right {
  display: flex;
  gap: 10px;
}

/* 主要内容区域 */
.main-content {
  display: flex;
  gap: 20px;
  height: calc(100vh - 140px);
}

/* 左侧面板 */
.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 雷达图区域 */
.radar-section {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 20px;
  height: 350px;
}

.radar-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radar-chart {
  width: 300px;
  height: 300px;
}

.scan-line {
  animation: radar-scan 3s linear infinite;
  transform-origin: 150px 150px;
}

@keyframes radar-scan {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 报警日志区域 */
.alarm-log-section {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 20px;
  flex: 1;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

.blue-line {
  width: 4px;
  height: 20px;
  background-color: #0099ff;
  border-radius: 2px;
}

.alarm-icon {
  color: #0099ff;
  font-size: 18px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.log-content {
  height: calc(100% - 50px);
  overflow-y: auto;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #999999;
  gap: 10px;
}

.no-data i {
  font-size: 48px;
  color: #0099ff;
  opacity: 0.5;
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.log-item {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #0099ff;
}

.log-time {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.log-content-text {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.log-device {
  font-size: 12px;
  color: #0099ff;
  margin-bottom: 4px;
}

.log-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.log-type-alarm {
  background-color: #fee;
  color: #f56565;
}

.log-type-operation {
  background-color: #e6f7ff;
  color: #1890ff;
}

.log-type-fault {
  background-color: #fff7e6;
  color: #fa8c16;
}

/* 右侧面板 */
.right-panel {
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 设备信息卡片 */
.device-card {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

.device-icon {
  font-size: 24px;
  color: #ff6b35;
}

.device-name {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.card-content {
  margin-bottom: 20px;
}

.status-row,
.device-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.status-label,
.info-label {
  font-size: 14px;
  color: #666;
}

.status-value,
.info-value {
  font-size: 14px;
  font-weight: 500;
}

.status-normal {
  color: #52c41a;
}

.status-alarm {
  color: #f5222d;
}

.status-fault {
  color: #fa8c16;
}

.status-offline {
  color: #999;
}

.card-actions {
  display: flex;
  justify-content: center;
}

/* 加载状态 */
.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #999;
  gap: 10px;
}

.loading-content i {
  font-size: 24px;
  color: #0099ff;
}

.cancel-alarm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 空白区域 */
.blank-area {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
    height: auto;
  }
  
  .right-panel {
    width: 100%;
  }
  
  .radar-section {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .fire-warning-container {
    padding: 10px;
  }
  
  .page-header {
    padding: 10px 15px;
  }
  
  .page-title {
    font-size: 20px;
  }
  
  .radar-chart {
    width: 250px;
    height: 250px;
  }
}
</style>